<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          教师考勤记录
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :importBtn="false"
                  :batchDelBtn="false"
                  :downTemplate="false"
                  :addBtn="false"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:exportFn="exportFn"
                  placeholder="教师名关键字"
                  searchText="教师名："
                  cleanText="刷新"
                  :operate="[]"
                  exportPath="exportPath"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            <div class="db_inline">
              日期：
              <DatePicker type="date" placeholder="开始时间" v-model="searchParam.bTime"
                          @on-change="searchParam.bTime=$event"
                          style="width: 140px"></DatePicker>
              至
              <DatePicker type="date" placeholder="结束时间" v-model="searchParam.eTime"
                          @on-change="searchParam.eTime=$event"
                          style="width: 140px"></DatePicker>
            </div>
          </div>
        </VmBtable>
      </Card>
    </Row>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import Cookie from "js-cookie"

  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 0,
          bTime: '',
          eTime: '',
          teacherName: '',
        },
        exportPath: Cookie.getJSON('cdnUrl'),
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 100
          },
          {
            title: '教师名称',
            key: 'teacherName',
            align: 'center'
          },
          {
            title: '日期',
            key: 'day',
            align: 'center',
            sortable: true,
            sortType: 'desc'
          },
          {
            title: '考勤时间段',
            align: 'center',
            render: (h, param) => {
              return h('div',{},param.row.atdBTime+'-'+param.row.atdETime)
            }
          },
          {
            title: '打卡时间',
            key: 'signTime',
            align: 'center',
            sortable: true,
            sortType: 'desc'
          },
          {
            title: '状态',
            key: 'status',
            align: 'center',
          }
        ],
        operate: [],
        dataTable: [],
        modal: {
          visible: false,
          title: '',
          isEdit: false,
          loading: false,
          form: {
            name: '',
          },
          rules: {
            'name': [{
              required: true,
              trigger: 'blur',
              message: '必填项'
            }]
          }
        },
      };
    },
    methods: {
      dayChange(date, type) {
        this.searchParam.day = date;
        this.queryFn();
      },
      exportFn() {
        this.$Modal.confirm({
          title: '提示',
          content: '是否导出符合筛选条件的考勤数据？',
          onOk: () => {
            API.exportAtd(this.searchParam);
          },
          onCancel: () => {

          }
        })
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.teacherName = '';
        this.searchParam.bTime = '';
        this.searchParam.eTime = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchTeaAtd(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.teacherName = value;
        this.queryFn();
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
    }
  }
</script>

<style scoped>

</style>
